<template>
  <div>
    <div class="often_content">
      <draggable v-model="oftenData" :options="{ filter: '.undrag' }">
        <div
          class="often_content_item"
          v-for="(item, index) in oftenData"
          :key="item.id"
        >
          <el-card>
            <div class="item_box">
              <div class="left">
                <img :src="fileBaseUrl + item.icon" />
                <div class="text_box">
                  <div class="title">入口名称：{{ item.entryName }}</div>
                  <div class="text">订单类型：{{ item.value === 1? mapOrderType(item.orderType) : mapValue(item.value) }}</div>
                </div>
              </div>
              <div class="right">
                <el-button size="mini" round type="primary" @click="edit(item, index)" >编辑</el-button>
                <el-button size="mini" type="danger" @click="del(index)" round
                  >删除</el-button
                >
                <el-button size="mini" round>拖拽排序</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </draggable>
    </div>

    <DialogOften ref="DialogOften" />
  </div>
</template>


<script>
import DialogOften from "./DialogOften.vue";
import config from "./config/DialogOten";
import draggable from "vuedraggable";
import { mapGetters } from "vuex";
export default {
  components: {
    draggable,
    DialogOften,
  },
  data() {
    return {
      oftenData: [

      ],
      options: config.options,
    };
  },
  watch: {
    oftenData: {
      handler() {
        this.fetchData(true)
      },
      deep: true,
      // immediate: true
    }
  },
  computed: {
    ...mapGetters(["fileBaseUrl", "activePageForm"]),
    mapValue() {
      return (value) =>
        this.options.filter((item) => item.value === value)[0]?.label;
    },
    mapOrderType() {
      return (orderType) => {
        const mapSource = {
          5: '商城',
          6: '点餐',
          7: '预订',
          17: '预约',
          9: '赠送会员'
        }
        let newOrderType = []
        orderType.forEach((item, index) => {
          newOrderType[index] = mapSource[item]
        })
        return newOrderType.join(',')
      }
    }
  },
  mounted() {
    this.fetchData()
    this.$bus.on("__OFTEN", this.__OFTEN);
  },
  destroyed() {
    this.$bus.off("__OFTEN");
  },
  methods: {
    edit(form, index) {
      const dialogOften = this.$refs.DialogOften;
      dialogOften.open(form).then(res => {
         this.oftenData[index] = res
         this.oftenData = JSON.parse(JSON.stringify(this.oftenData))
      })
    },
    del(index) {
      this.oftenData.splice(index, 1)
    },
    __OFTEN() {
      console.log(111)
      const dialogOften = this.$refs.DialogOften;
      dialogOften.open().then((res) => this.oftenData.push(res));
    },
    fetchData(set = false) {
      const module = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      if(!set && module.modules?.length) {
        const modules = []
        module.modules.forEach(item => {
          modules.push({...item.biz.params, dump: item.dump, icon: item.pic})
        })
        this.oftenData = modules
        return
      }
      const modules = [];
      this.oftenData.forEach((item) => {
        const params = {
          value: item.value,
          entryName: item.entryName,
          tig: item.tig,
          orderType: item.orderType,
          path: item.path,
          isPath: item.isPath,
          isMemberShow: item.isMemberShow,
          contactsType: item.contactsType,
          contactsInfo: item.contactsInfo
        };
        modules.push({
          biz: {
            params,
            type: 'OFTEN'
          },
          dump: item.dump,
          pic: item.icon,
          type: 'changyonggongneng'
        });
      });

      module.modules = modules
      console.log(module.modules)
    },
  },
};
</script>


<style lang="scss" scoped>
.tip_text {
  margin-top: 20px;
  /deep/.el_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.often_content {
  margin-top: 20px;

  .often_content_item {
    margin-top: 10px;
    .item_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        img {
          height: 25px;
          width: 25px;
          margin-right: 10px;
        }
        .text_box {
          .text {
            margin-top: 5px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
